import { VNode, createVNode, render } from 'vue'
import VideoPlayer from './src/VideoPlayer.vue'
import { isClient } from '@/utils/is'
import { VideoPlayerViewer } from '@/components/VideoPlayerViewer'
import { toAnyString } from '@/utils'
import axios, { AxiosError } from 'axios'
import { TextPreview } from '@/components/TextPreview'
export { VideoPlayer }

let instance: Nullable<VNode> = null

export function createVideoViewer(options: { url: string; poster?: string; show?: boolean }) {
  if (!isClient) return
  const { url, poster } = options

  const propsData: Partial<{ url: string; poster?: string; show?: boolean; id?: string }> = {}
  const container = document.createElement('div')
  const id = toAnyString()
  container.id = id
  propsData.url = url
  propsData.poster = poster
  propsData.show = true
  propsData.id = id

  document.body.appendChild(container)
  instance = createVNode(VideoPlayerViewer, propsData)
  render(instance, container)
}

export function createTextViewer(options: { url: string; poster?: string; show?: boolean }) {
  console.log('createTextViewer----------', options, isClient)
  if (!isClient) return
  const { url, poster } = options
  const container = document.createElement('div')
  // const propsData: Partial<{ url: string; poster?: string; show?: boolean; id?: string }> = {}
  // const container = document.createElement('div')
  // const id = toAnyString()
  // container.id = id
  // propsData.url = url
  // propsData.poster = poster
  // propsData.show = true
  // propsData.id = id

  const transformData = (data: any) => {
    return new Promise((resolve) => {
      const reader = new FileReader()
      reader.readAsText(data, 'GBK')
      reader.onload = () => {
        resolve(reader.result)
      }
    })
  }
  // if (url) {
  //   axios
  //     .get(url, {
  //       responseType: 'blob',
  //       transformResponse: [
  //         async function (data) {
  //           return await transformData(data)
  //         }
  //       ]
  //     })
  //     .then((res) => {
  //       res.data.then((data: any) => {
  //         container.innerText = data
  //       })
  //     })
  // }

  document.body.appendChild(container)
  instance = createVNode(TextPreview, {
    show: true,
    content: '我是文本问近段时间看电视剧肯定是',
    id: toAnyString()
  })
  render(instance, container)
}
